今天要來介紹 ES6 中新的變數宣告方式的 let、const
並且跟過去我們常用的 var
做比較,我們先來看 airbnb 中關於變數的撰寫建議:
ESLint airbnb 規則
- 2-1.對於所有的參考使用 const;避免使用 var
- 2.2 如果你需要可變動的參考,使用 let 代替 var
- 2.3 請注意,let 與 const 的作用域都只在區塊內
所以 airbnb 的規則就是 不要使用var了
,而究竟 let 有什麼好處?要殘忍的拋棄陪伴我們多年的 var 呢?今天就來介紹 let 跟 const 的特性,並且跟過去的 var 做比較吧!
在了解新的變數之前,我們要先知道變數的「有效範圍」,變數的宣告位置,是會影響他們執行的有效範圍的!而有效範圍主要分為「全域變數」跟「區域變數」兩種:
函式外
宣告的變數,在整個程式中都可以被存取與修改var price = 30 ; //這是全域變數
function count() {
…
}
區塊內
等被 { } 包起來的地方宣告的變數(例如 if、else、for、while)if (true) {
var price = 30 ; //這是區域變數
}
var的作用域是「函式作用域」,也就是在 function 內宣告的 var,要在該 function 才有作用
啦~會以該 function 範圍為界線,在 function 外面的區域就無法取用了!
function count() {
var price = 100;
console.log(price); //出現100,function內的var變數只會存在在function內
}
console.log(price); //出現錯誤,無法存取price
那在這裡 var 有一個大大的缺點,也就是在一些區塊語句(if、else、 for、 while等)裡面用 var 宣告的變數,是會洩漏到全域中的!
這樣就有可能會導致一些副作用,可能會彼此影響,或是在工程師交接中增加維護難度。
以下兩個範例:
var price = 20;
If (true) {
var price = 30;
}
console.log(price) // 出現 30,區域變數覆蓋全域變數
for (var i = 0; i<10 ; i++) {
…
}
console.log(i) // 出現 10,循環變數洩漏為全域變數
而在 ES6 的版本中,推出了新的變數宣告關鍵字 let 與 const
,不會有var的副作用,以下跟大家詳解。
let 與 var 其實差不多,主要的差別在於 let 所宣告的變項只有在代碼塊區域(block scope)內有效,也就是 { } 包住的區域,所以只要是被所屬{ }包起來的let變數,都不會跑到外面(全域)
去!
if (true) {
let price = 100; // 因為用let宣告,所以price只會存在在if{}大括弧包起來的區塊內
}
console.log(price) // 出現錯誤,無法存取
所以在下方的例子中,兩個 let 互不干擾,if 內的 price 不會覆蓋全域變數的 price 囉!
let price = 20;
if (true) {
let price = 30;
}
console.log(price) // // 出現20 區域變數不會覆蓋全域變數
有沒有發現~只要是被{ }
包起來的區域,就不能在全域存取囉!
const 就是指「常數」,簡單來說就是不變的數值
(例如圓周率)。
宣告上有一些規定:
例如:圓周率
const Pi = 3.14159265 ; //因為圓周率是永恆不變的數值,所以很適合用const來宣告!
console.log(Pi)
以上介紹完畢!希望大家有了解到 let 跟 const 的美好了,未來為了讓開發的專案更加穩定,建議可以使用 const或者 let 這兩種嚴謹的宣告變數來取代 var,讓 var 走入歷史囉~~